<template>
  <h2 class="page-title">留言墙</h2>
  <!-- 表格 -->
  <el-table
    :data="tableData"
    border
    stripe
    fit
    empty-text="暂无数据"
    show-header
    v-loading="loading"
    size="default"
    element-loading-text="Loading..."
    :header-cell-style="{ background: '#e7e1fb' }"
    style="width: 100%"
    max-height="600px"
  >
    <el-table-column type="index" label="序号" width="80" align="center" />
    <el-table-column prop="id" label="ID" />
    <el-table-column prop="msgInfo" label="消息内容" />
    <el-table-column prop="sendName" label="发送者昵称" />
    <el-table-column prop="sendUid" label="发送者ID" />
    <el-table-column prop="addresseeName" label="接受者昵称" />
    <el-table-column prop="addresseeUid" label="接收者ID" />
    <el-table-column prop="sendTime" label="发送时间" />
  </el-table>
  <!-- 分页器 -->
  <div class="pagination-block">
    <el-pagination
      v-model:current-page="currentPage"
      v-model:page-size="pageSize"
      :page-sizes="[20, 40, 80, 100]"
      background
      layout="total,sizes, prev, pager, next,jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script setup>
import { getCommunityActivityList } from '@/api/Association/ment.js';
import { ref, onMounted } from 'vue';
import { useRoute } from 'vue-router';

const route = useRoute();
// 分页变量
const currentPage = ref(1);
const pageSize = ref(20);
const total = ref(0);

// 列表数据+表单校验
const tableData = ref([]);
const loading = ref(true);
// 分页逻辑
const handleSizeChange = async (val) => {
  pageSize.value = val;
  CommunityActivityList();
};
const handleCurrentChange = (val) => {
  currentPage.value = val;
  CommunityActivityList();
};
// 获取列表
const CommunityActivityList = async () => {
  loading.value = true;
  const res = await getCommunityActivityList({
    current: currentPage.value,
    size: pageSize.value,
    query: { communityId: route.params.id },
  });
  if (res.data.code === 200) {
    tableData.value = res.data.data.items;
    total.value = res.data.data.counts || 0;
    loading.value = false;
  }
};
onMounted(() => {
  CommunityActivityList();
});
</script>

<style lang="scss" scoped></style>
